<template>
  <view class="page-container">
    <view class="page-header">
      <wd-navbar title="新增宗祠" left-arrow @click-left="goBack" />
    </view>

    <scroll-view class="page-content" scroll-y>
      <view class="form-container">
        <wd-form ref="formRef" errorType="toast" :model="formData">
          <!-- 基本信息 -->
          <view class="form-section">
            <view class="section-header">
              <view class="section-title">基本信息</view>
              <view class="section-subtitle">填写宗祠的核心信息</view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                宗祠名称
                <text class="required-mark">*</text>
              </view>
              <view class="form-input">
                <wd-input
                  v-model="formData.templeName"
                  placeholder="请输入宗祠名称"
                  clearable
                  prop="templeName"
                />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                副标题
                <text class="optional-mark">选填</text>
              </view>
              <view class="form-input">
                <wd-input v-model="formData.subTitle" placeholder="请输入副标题" clearable />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                宗祠位置
                <text class="required-mark">*</text>
              </view>
              <view class="form-input">
                <wd-input
                  v-model="formData.location"
                  placeholder="请输入详细地址"
                  clearable
                  prop="location"
                />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                宗祠介绍
                <text class="required-mark">*</text>
              </view>
              <view class="form-input">
                <wd-textarea
                  v-model="formData.introduction"
                  placeholder="请详细介绍宗祠的历史、文化价值等"
                  :maxlength="500"
                  show-word-limit
                  rows="4"
                  prop="introduction"
                />
              </view>
            </view>
          </view>

          <!-- 图片资料 -->
          <view class="form-section">
            <view class="section-header">
              <view class="section-title">图片资料</view>
              <view class="section-subtitle">上传宗祠相关图片</view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                封面图片
                <text class="required-mark">*</text>
              </view>
              <view class="upload-section">
                <AvatarUploader v-model="formData.coverImage" />
                <view class="upload-tip">建议尺寸：16:9，支持jpg、png格式</view>
                <wd-input v-model="formData.coverImage" style="display: none" prop="coverImage" />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                图片集
                <text class="optional-mark">选填</text>
              </view>
              <view class="upload-multiple">
                <view v-for="(img, index) in formData.imageList" :key="index" class="upload-item">
                  <image :src="img" class="preview-image" />
                  <view class="remove-btn" @click="removeImage(index)">
                    <wd-icon name="close" size="16" color="#fff" />
                  </view>
                </view>
                <view
                  v-if="formData.imageList.length < 5"
                  class="upload-item upload-add"
                  @click="chooseImage('multiple')"
                >
                  <wd-icon name="add" size="32" color="#ccc" />
                  <text class="upload-text">添加图片</text>
                </view>
              </view>
              <view class="upload-tip">最多可上传5张图片</view>
            </view>
          </view>

          <!-- 联系信息 -->
          <view class="form-section">
            <view class="section-header">
              <view class="section-title">联系信息</view>
              <view class="section-subtitle">填写负责人相关信息</view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                负责人
                <text class="required-mark">*</text>
              </view>
              <view class="form-input">
                <wd-input
                  v-model="formData.manager"
                  placeholder="请输入负责人姓名"
                  clearable
                  prop="manager"
                />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">负责人电话</view>
              <view class="form-input">
                <wd-input
                  v-model="formData.managerPhone"
                  placeholder="请输入联系电话"
                  type="number"
                  clearable
                />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                供稿人
                <text class="optional-mark">选填</text>
              </view>
              <view class="form-input">
                <wd-input v-model="formData.contributor" placeholder="请输入供稿人姓名" clearable />
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                开放时间
                <text class="optional-mark">选填</text>
              </view>
              <view class="form-input">
                <wd-input
                  v-model="formData.openingHours"
                  placeholder="如：周一至周日 9:00-17:00"
                  clearable
                />
              </view>
            </view>
          </view>

          <!-- 其他信息 -->
          <view class="form-section">
            <view class="section-header">
              <view class="section-title">其他信息</view>
              <view class="section-subtitle">补充说明和状态设置</view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">状态</view>
              <view class="form-input">
                <wd-radio-group v-model="formData.status" inline>
                  <wd-radio value="1">
                    <view class="status-option status-enabled">
                      <view class="status-dot status-dot-enabled"></view>
                      <text>启用</text>
                    </view>
                  </wd-radio>
                  <wd-radio value="0">
                    <view class="status-option status-disabled">
                      <view class="status-dot status-dot-disabled"></view>
                      <text>禁用</text>
                    </view>
                  </wd-radio>
                </wd-radio-group>
              </view>
            </view>

            <view class="form-item-wrapper">
              <view class="form-label">
                备注
                <text class="optional-mark">选填</text>
              </view>
              <view class="form-input">
                <wd-textarea
                  v-model="formData.remark"
                  placeholder="请输入需要补充说明的信息"
                  :maxlength="200"
                  show-word-limit
                  rows="2"
                />
              </view>
            </view>
          </view>
        </wd-form>
      </view>
    </scroll-view>

    <view class="page-footer">
      <wd-button type="info" size="large" plain @click="goBack">取消</wd-button>
      <view v-if="!submitLoading" class="form-progress">
        <text class="progress-text">{{ getFormProgress() }}</text>
      </view>
      <wd-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit">
        <!-- <wd-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" :disabled="!isFormValid"> -->

        {{ submitLoading ? "提交中..." : "提交" }}
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import request from "@/utils/request";
import { createTemple } from "@/api/temple";
import AvatarUploader from "@/components/AvatarUploader/AvatarUploader.vue";
import FileAPI from "@/api/file";
// import UploaderImgVideo from '@/components/AvatarUploader/UploaderImgVideo.vue'
interface FormData {
  templeName: string;
  subTitle?: string;
  coverImage?: string;
  imageList?: string[];
  location: string;
  introduction: string;
  manager: string;
  managerPhone?: string;
  contributor?: string;
  openingHours?: string;
  status: string;
  remark?: string;
}

const formRef = ref();
const submitLoading = ref(false);

const formData = reactive<FormData>({
  templeName: "",
  subTitle: "",
  coverImage: "", // 初始为空，强制用户上传封面图片
  imageList: [],
  location: "",
  introduction: "",
  manager: "",
  managerPhone: "",
  contributor: "",
  openingHours: "",
  status: "1",
  remark: "",
});

const rules = {
  templeName: [
    { required: true, message: "请输入宗祠名称" },
    { min: 2, max: 50, message: "宗祠名称长度应在2-50个字符之间" },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\s\-·]+$/,
      message: "宗祠名称只能包含中文、英文、数字、空格、连字符和中圆点",
    },
  ],
  subTitle: [{ min: 0, max: 100, message: "副标题长度不能超过100个字符" }],
  location: [
    { required: true, message: "请输入宗祠详细地址" },
    { min: 5, max: 200, message: "宗祠地址长度应在5-200个字符之间" },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\s\-\·,，.。;；:：()（）]+$/,
      message: "地址格式不正确，请检查特殊字符",
    },
  ],
  introduction: [
    { required: true, message: "请输入宗祠详细介绍" },
    { min: 10, max: 500, message: "宗祠介绍长度应在10-500个字符之间，请补充更多信息" },
  ],
  coverImage: [
    { required: true, message: "请上传宗祠封面图片" },
    {
      validator: (rule, value) => {
        return value && value !== "" && value !== "/static/images/default-temple.jpg";
      },
      message: "请上传有效的宗祠封面图片",
    },
  ],
  imageList: [{ type: "array", max: 5, message: "图片集最多可上传5张图片" }],
  manager: [
    { required: true, message: "请输入宗祠负责人姓名" },
    { min: 2, max: 20, message: "负责人姓名长度应在2-20个字符之间" },
  ],
  managerPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的11位手机号码" },
    { len: 11, message: "手机号码长度应为11位" },
  ],
  contributor: [
    { min: 0, max: 20, message: "供稿人姓名长度不能超过20个字符" },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z·\s]*$/, message: "供稿人姓名只能包含中文、英文和中圆点" },
  ],
  openingHours: [
    { min: 0, max: 100, message: "开放时间长度不能超过100个字符" },
    {
      pattern: /^[\u4e00-\u9fa5a-zA-Z0-9\s\-:：~～,，.。;；()（）]+$/,
      message: "开放时间格式不正确",
    },
  ],
  status: [{ required: true, message: "请选择宗祠状态" }],
  remark: [{ min: 0, max: 200, message: "备注长度不能超过200个字符" }],
};

// 选择图片
function chooseImage(type: "multiple") {
  const count = 5 - (formData.imageList?.length || 0);

  uni.chooseImage({
    count: count,
    sizeType: ["compressed"],
    sourceType: ["album", "camera"],
    success: async (res) => {
      // 验证图片格式
      const tempFiles = res.tempFiles || [];

      // 检查每个文件的格式和大小
      for (let i = 0; i < tempFiles.length; i++) {
        const file = tempFiles[i];
        const fileExtension = file.path.split(".").pop().toLowerCase();

        // 检查文件大小 (限制5MB)
        if (file.size > 5 * 1024 * 1024) {
          uni.showToast({
            title: "图片大小不能超过5MB",
            icon: "none",
          });
          return;
        }
      }

      try {
        uni.showLoading({ title: "上传中..." });

        // 使用Promise.all并行上传所有图片
        const uploadPromises = res.tempFilePaths.map((filePath) => FileAPI.upload(filePath));

        const uploadResults = await Promise.all(uploadPromises);

        // 提取上传后的图片URL
        const uploadedUrls = uploadResults.map((fileInfo) => fileInfo.url);

        // 过滤掉已存在的图片并添加新图片
        const newImages = uploadedUrls.filter((url) => {
          return !(formData.imageList || []).includes(url);
        });

        formData.imageList = [...(formData.imageList || []), ...newImages];

        uni.hideLoading();
        uni.showToast({
          title: `成功上传${newImages.length}张图片`,
          icon: "success",
        });
      } catch (error) {
        console.error("上传图片失败:", error);
        uni.hideLoading();
        uni.showToast({
          title: "上传图片失败，请重试",
          icon: "none",
        });
      }
    },
    fail: (err) => {
      console.error("选择图片失败:", err);
      uni.showToast({
        title: "选择图片失败，请重试",
        icon: "none",
      });
    },
  });
}

// 移除图片
function removeImage(index: number) {
  formData.imageList?.splice(index, 1);
}

// 返回上一页
function goBack() {
  uni.navigateBack();
}
// 宗祠名称校验函数
function validateTempleName(templeName: string) {
  // 检查是否为空
  if (!templeName) {
    return { valid: false, message: "请输入宗祠名称" };
  }

  // 检查长度（2-50个字符）
  if (templeName.length < 2 || templeName.length > 50) {
    return { valid: false, message: "宗祠名称长度应在2-50个字符之间" };
  }

  // 检查字符格式（仅允许中文、英文、数字、空格、-和·）
  const pattern = /^[\u4e00-\u9fa5a-zA-Z0-9\s\-·]+$/;
  if (!pattern.test(templeName)) {
    return { valid: false, message: "宗祠名称只能包含中文、英文、数字、空格、-和·" };
  }

  // 全部验证通过
  return { valid: true };
}
// 宗祠详细位置函数
function validateTempleAddress(templeAddress: string) {
  // 检查是否为空
  if (!templeAddress) {
    return { valid: false, message: "请输入宗祠位置" };
  }

  // 检查长度（2-100个字符）
  if (templeAddress.length < 2 || templeAddress.length > 100) {
    return { valid: false, message: "宗祠详细地址长度应在2-100个字符之间" };
  }

  // 检查字符格式（允许中文、英文、数字、空格、-和·）
  const pattern = /^[\u4e00-\u9fa5a-zA-Z0-9\s\-·]+$/;
  if (!pattern.test(templeAddress)) {
    return { valid: false, message: "宗祠详细地址只能包含中文、英文、数字、空格、-和·" };
  }

  // 全部验证通过
  return { valid: true };
}
// 宗祠介绍校验函数
function validateTempleIntroduction(templeIntroduction: string) {
  // 检查是否为空
  if (!templeIntroduction) {
    return { valid: false, message: "请输入宗祠介绍" };
  }

  // 检查长度（2-200个字符）
  if (templeIntroduction.length < 2 || templeIntroduction.length > 200) {
    return { valid: false, message: "宗祠介绍长度应在2-200个字符之间" };
  }
  // 全部验证通过
  return { valid: true };
}
// 宗祠封面图片
function validateTempleCoverImage(templeCoverImage: string) {
  // 检查是否为空
  if (!templeCoverImage) {
    return { valid: false, message: "请上传封面图片" };
  }
  // 全部验证通过
  return { valid: true };
}
// 宗祠管理员校验函数
function validateTempleManager(templeManager: string) {
  // 检查是否为空
  if (!templeManager) {
    return { valid: false, message: "请输入宗祠管理员" };
  }
  // 全部验证通过
  return { valid: true };
}
// 宗祠管理员手机号校验函数
function validateTempleManagerPhone(templeManagerPhone: string) {
  // 如果为空，直接通过（选填）
  if (!templeManagerPhone || templeManagerPhone.trim() === "") {
    return { valid: true };
  }
  // 检查手机号格式
  if (!/^1[3-9]\d{9}$/.test(templeManagerPhone.trim())) {
    return { valid: false, message: "请输入正确的11位手机号码" };
  }
  // 全部验证通过
  return { valid: true };
}
// 提交表单
async function handleSubmit() {
  try {
    // 1. 表单基础校验
    const nameValidation = validateTempleName(formData.templeName);
    const addressValidation = validateTempleAddress(formData.location);
    const introductionValidation = validateTempleIntroduction(formData.introduction);
    const coverImageValidation = validateTempleCoverImage(formData.coverImage || "");
    const managerValidation = validateTempleManager(formData.manager || "");
    const managerPhoneValidation = formData.managerPhone?.trim()
      ? validateTempleManagerPhone(formData.managerPhone.trim())
      : { valid: true };
    if (
      !nameValidation.valid ||
      !addressValidation.valid ||
      !introductionValidation.valid ||
      !coverImageValidation.valid ||
      !managerValidation.valid ||
      !managerPhoneValidation.valid
    ) {
      uni.showToast({
        title:
          nameValidation.message ||
          addressValidation.message ||
          introductionValidation.message ||
          coverImageValidation.message ||
          managerValidation.message ||
          managerPhoneValidation.message,
        icon: "none",
      });
      return;
    }
    // 5. 开始提交
    submitLoading.value = true;

    // 6. 准备提交数据 - 根据API字段映射
    const submitData = {
      templeName: formData.templeName.trim(),
      subTitle: formData.subTitle?.trim() || "",
      location: formData.location.trim(),
      intro: formData.introduction.trim(),
      coverImage: formData.coverImage,
      imageArray: formData.imageList ? formData.imageList.join(",") : "",
      manager: formData.manager.trim(),
      managerPhone: formData.managerPhone?.trim() || "",
      contributor: formData.contributor?.trim() || "",
      openingHours: formData.openingHours?.trim() || "",
      status: parseInt(formData.status),
      notes: formData.remark?.trim() || "",
      longitude: 115.984018, // 默认经纬度
      latitude: 28.447447,
      historyArray: "[]",
    };

    console.log("准备提交宗祠数据:", submitData);

    // 7. 调用API提交数据
    await createTemple(submitData).then((res) => {
      // 8. 成功处理
      uni.showToast({
        title: "宗祠信息创建成功",
        icon: "success",
        duration: 2000,
      });

      // 9. 延迟返回并刷新列表
      setTimeout(() => {
        uni.navigateBack({
          success: () => {
            uni.$emit("refreshTempleList");
            uni.$emit("templeAdded", submitData);
          },
        });
      }, 1500);
    });
  } catch (error: any) {
    // 处理不同类型的错误
    if (error?.response?.data) {
      const errorData = error.response.data;
      const errorMsg = errorData.message || errorData.msg || "提交失败，请稍后重试";

      uni.showToast({
        title: errorMsg,
        icon: "none",
        duration: 3000,
      });
    } else if (error && Array.isArray(error) && error.length > 0) {
      // 表单验证错误 - wot-design-uni的错误格式
      uni.showToast({
        title: error[0].message,
        icon: "none",
        duration: 2000,
      });
    } else if (error && typeof error === "object" && error.message) {
      // 单个错误对象
      uni.showToast({
        title: error.message,
        icon: "none",
        duration: 2000,
      });
    } else {
      // 网络或其他错误
      uni.showToast({
        title: "提交失败，请检查网络后重试",
        icon: "none",
        duration: 2000,
      });
    }
  } finally {
    // 确保loading状态被重置
    submitLoading.value = false;
  }
}
// 获取表单校验状态
function getFormStatus() {
  if (!formRef.value) return "empty";

  const fields = ["templeName", "location", "introduction", "coverImage", "manager"];
  const filledFields = fields.filter((field) => {
    const value = formData[field as keyof FormData];
    if (field === "coverImage") {
      return value && value !== "" && value !== "/static/images/default-temple.jpg";
    }
    return value !== "" && value !== null && value !== undefined;
  });

  if (filledFields.length === 0) return "empty";
  if (filledFields.length === fields.length) return "complete";
  return "partial";
}

// 计算属性：表单是否有效
const isFormValid = computed(() => {
  return (
    formData.templeName?.trim() &&
    formData.location?.trim() &&
    formData.introduction?.trim() &&
    formData.coverImage &&
    formData.coverImage !== "/static/images/default-temple.jpg" &&
    formData.manager?.trim()
  );
});

// 获取表单进度提示
function getFormProgress() {
  const requiredFields = [
    { name: "宗祠名称", value: formData.templeName?.trim() },
    { name: "宗祠地址", value: formData.location?.trim() },
    { name: "宗祠介绍", value: formData.introduction?.trim() },
    {
      name: "封面图片",
      value: formData.coverImage && formData.coverImage !== "/static/images/default-temple.jpg",
    },
    { name: "负责人姓名", value: formData.manager?.trim() },
  ];

  const filledFields = requiredFields.filter((field) => field.value).length;
  const totalFields = requiredFields.length;
  const missingFields = requiredFields.filter((field) => !field.value).map((field) => field.name);

  if (filledFields === totalFields) {
    return "表单填写完成 ✓";
  } else {
    return `已填写 ${filledFields}/${totalFields} 项必填内容`;
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.page-header {
  flex-shrink: 0;
}

.page-content {
  flex: 1;
  overflow: hidden;
}
.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-container {
  padding: 0;
  background: transparent;
  margin: 0;
  border-radius: 0;
}

.form-section {
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.section-header {
  padding: 40rpx 32rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);

  .section-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8rpx;
    position: relative;
  }

  .section-title::before {
    content: "";
    position: absolute;
    left: -16rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 4rpx;
    height: 28rpx;
    background: #409eff;
    border-radius: 2rpx;
  }

  .section-subtitle {
    font-size: 26rpx;
    color: #8b9dc3;
    font-weight: 400;
  }
}

.form-item-wrapper {
  padding: 32rpx;
  // border-bottom: 1rpx solid #f8f9fa;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #fafbfc;
  }

  &:last-child {
    border-bottom: none;
  }

  .form-label {
    font-size: 30rpx;
    color: #2c3e50;
    margin-bottom: 16rpx;
    font-weight: 600;
    display: flex;
    align-items: center;

    .required-mark {
      color: #ff4757;
      margin-left: 8rpx;
      font-weight: 700;
      font-size: 28rpx;
    }

    .optional-mark {
      color: #95a5a6;
      font-size: 24rpx;
      margin-left: 12rpx;
      font-weight: 400;
      background: #ecf0f1;
      padding: 2rpx 8rpx;
      border-radius: 12rpx;
    }
  }

  .form-input {
    position: relative;
  }

  .form-input :deep(.wd-input__input) {
    font-size: 30rpx;
    color: #2c3e50;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 24rpx 28rpx;
    transition: all 0.3s ease;
  }

  .form-input :deep(.wd-input__input:focus) {
    border-color: #409eff;
    background: #fff;
    box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
  }

  .form-input :deep(.wd-textarea__textarea) {
    font-size: 30rpx;
    color: #2c3e50;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 24rpx 28rpx;
    transition: all 0.3s ease;
    line-height: 1.6;
  }

  .form-input :deep(.wd-textarea__textarea:focus) {
    border-color: #409eff;
    background: #fff;
    box-shadow: 0 0 0 4rpx rgba(64, 158, 255, 0.1);
  }

  .form-input :deep(.wd-radio-group) {
    gap: 32rpx;
  }

  .form-input :deep(.wd-radio) {
    margin-right: 0;
  }

  .form-input :deep(.wd-radio__label) {
    font-size: 28rpx;
    color: #5a6c7d;
  }

  .status-option {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 8rpx 16rpx;
    border-radius: 20rpx;
    transition: all 0.3s ease;
    font-weight: 500;
  }

  .status-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .status-dot-enabled {
    background: #52c41a;
    box-shadow: 0 0 0 4rpx rgba(82, 196, 26, 0.2);
  }

  .status-dot-disabled {
    background: #ff4757;
    box-shadow: 0 0 0 4rpx rgba(255, 71, 87, 0.2);
  }

  .status-enabled {
    color: #52c41a;
    background: rgba(82, 196, 26, 0.1);
  }

  .status-disabled {
    color: #ff4757;
    background: rgba(255, 71, 87, 0.1);
  }

  .form-input :deep(.wd-radio.is-checked .status-option) {
    transform: scale(1.05);
  }

  .form-input :deep(.wd-radio.is-checked .status-enabled) {
    background: rgba(82, 196, 26, 0.15);
    box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.2);
  }

  .form-input :deep(.wd-radio.is-checked .status-disabled) {
    background: rgba(255, 71, 87, 0.15);
    box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.2);
  }
}

.upload-section {
  width: 100%;
  margin-top: 8rpx;
}

.upload-tip {
  font-size: 24rpx;
  color: #95a5a6;
  margin-top: 8rpx;
  font-weight: 400;
}

.upload-multiple {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-top: 8rpx;
}

.upload-item {
  width: calc(30% - 14rpx);
  aspect-ratio: 1;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  border: 2rpx solid #e9ecef;
  transition: all 0.3s ease;
}

.upload-item:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.upload-add {
  border: 2rpx dashed #d0d7de;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-add:hover {
  border-color: #409eff;
  background: #f0f7ff;
}

.remove-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 44rpx;
  height: 44rpx;
  background: rgba(255, 71, 87, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2rpx 8rpx rgba(255, 71, 87, 0.3);
}

.remove-btn:hover {
  background: rgba(255, 71, 87, 1);
  transform: scale(1.1);
}

.page-footer {
  display: flex;
  gap: 24rpx;
  padding: 32rpx;
  background: #fff;
  border-top: 1rpx solid #f8f9fa;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.02);
  justify-content: space-around;
  align-items: center;

  .form-progress {
    flex: 1;
    text-align: center;
  }

  .progress-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }

  wd-button {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
  }

  wd-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
  }

  wd-button:hover::before {
    left: 100%;
  }

  wd-button[type="info"][plain] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #5a6c7d;
    box-shadow: 0 2rpx 8rpx rgba(90, 108, 125, 0.1);
  }

  wd-button[type="info"][plain]:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 12rpx rgba(90, 108, 125, 0.15);
  }

  wd-button[type="info"][plain]:active {
    transform: translateY(0);
    box-shadow: 0 2rpx 4rpx rgba(90, 108, 125, 0.1);
  }

  wd-button[type="primary"] {
    background: linear-gradient(135deg, #409eff 0%, #1989fa 100%);
    color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
  }

  wd-button[type="primary"]:hover {
    background: linear-gradient(135deg, #1989fa 0%, #0066cc 100%);
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 16rpx rgba(64, 158, 255, 0.4);
  }

  wd-button[type="primary"]:active {
    transform: translateY(0);
    box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.3);
  }
}
</style>
